<template>
  <div>
    <el-form :inline="true" class="user-search">
      <el-form-item>
        <el-input size="small" v-model="queryForm.status" clearable placeholder="状态"></el-input>
      </el-form-item>
      <el-button size="small" type="primary" icon="el-icon-search" @click="list">查询</el-button>
    </el-form>

    <el-table :data="tableData" height="510" border style="width: 100%" :header-cell-style="{textAlign: 'center'}">
      <el-table-column label="分数" prop="score">
      </el-table-column>
      <el-table-column label="评论时间" prop="time">
      </el-table-column>
      <el-table-column label="商家回复" prop="reply">
      </el-table-column>
      <el-table-column label="评价状态" prop="status">
      </el-table-column>
      <el-table-column label="回复时间" prop="replyTime">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button @click="doDel(scope.$index, scope.row)" type="primary" size="small" icon="el-icon-delete">删除</el-button>
          <!-- <el-button type="danger" icon="el-icon-delete" circle></el-button> -->
          <!-- <el-button size="mini" @click="doReply(scope.$index, scope.row)" title="回复" icon="el-icon-tickets">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.page"
        :page-sizes="[5,10, 25, 50, 100]" :page-size="queryForm.rows" layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        queryForm: {
          status: null,
          page: 1,
          rows: 10,
          total: 0
        },
        mergeForm: {
          id:null,
          score: null,
          time: null,
          reply: null,
          status: null,
          replyTime: null
        },
        tableData: []
      }
    },
    methods: {
      list: function() {
        // console.log('list');
        this.axios.post(this.axios.urls.SYS_HOTELASSESS_LIST, this.queryForm).then((response) => {
          this.tableData = response.data.result
          this.queryForm.page = response.data.page
          this.queryForm.rows = response.data.rows
          this.queryForm.total = response.data.total
        })
      },
      doDel: function(index, row) {
        this.$confirm('您确定要删除该条记录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(this.axios.urls.SYS_HOTELASSESS_DEL, {
            id: row.id
          }).then((response) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.list()
          })
        })
      },
      handleSizeChange(rows) {
        // console.log('handleSizeChange');
        this.queryForm.page = 1
        this.queryForm.rows = rows
        this.list()
      },
      handleCurrentChange(page) {
        // console.log('handleCurrentChange');
        this.queryForm.page = page
        this.list()
      }
    },
    created() {
      this.list()
    }
  }
</script>

<style>
  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }

  .block {
    margin-top: 20px;
    text-align: right;
  }
</style>
